<template>
  <div>
    <p ref="para">some paragraph</p>
    <ChildComp ref="comp" />
    <button @click="handleClick">查看所有引用</button>
  </div>
</template>

<script>
import ChildComp from "./ChildComp";
export default {
  components: {
    ChildComp,
  },
  methods: {
    handleClick() {
      // 获取持有的所有引用
      console.log(this.$refs);
      console.log("我拿到了子组件ChildComp的实例：");
      console.log(this.$refs.comp);
      //调用子组件ChildComp 子组件里面的m1方法
      this.$refs.comp.m1();
      //更改子组件的a和b数据
      this.$refs.comp.a = "我修改了a";
      this.$refs.comp.b = "我修改了b";
      /*
        {
        	para: p元素（原生DOM）,
        	comp: ChildComp的组件实例
        }
        */
    },
  },
};
</script>